<template>
  <div>
    <el-table :data="order" :header-cell-style="{'text-align':'center'}" ref="table"
              :cell-style="{'text-align':'center'}">
      <el-table-column prop="name" label="场地名" width="100"/>
      <el-table-column prop="date" label="日期" width="100"/>
      <el-table-column prop="time" label="时间段" width="100"/>
      <el-table-column prop="amount" label="实际支付金额" width="150">
        <template slot-scope="scope">
          {{ scope.row.amount }}元
        </template>
      </el-table-column>
      <el-table-column prop="paymentMethod" label="支付方式" width="100"/>
      <el-table-column label="状态" width="100">
        <div slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </div>
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="200"/>
      <el-table-column prop="paymentTime" label="支付时间" width="200"/>
      <el-table-column prop="created" label="创建时间" width="100"/>

      <el-table-column label="操作" width="200">
        <template slot="header">
          <span>操作</span>
          <el-tooltip placement="top" effect="light">
            <div slot="content">
              <p>离场地使用时间不足<span style="color: red">30分钟</span>的场地订单将禁止取消订单</p>
            </div>
            <span style="color: black" class="el-icon-question"></span>
          </el-tooltip>
        </template>

        <div slot-scope="scope">
          <el-button type="danger" :disabled="scope.row.status==='已完成'||scope.row.status==='已取消'"
                     @click="backOrder(scope.row.id)">取消订单</el-button>
        </div>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: "userOrder",
  data() {
    return {
      order: []
    }
  },
  methods: {
    loadOrder() {
      let url = "http://localhost:9999/zx-order/booking/listByUserId?userId=" + localStorage.getItem("userId");
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('userJwt')}}
      ).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          jsonResult = jsonResult.data;
          this.order = jsonResult;
          console.log(this.order)
        }
      })
    },
    backOrder(id) {
      let data = this.qs.stringify({"id": id})
      let url = "http://localhost:9999/zx-order/booking/setCancel"
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('userJwt')}}
      ).post(url, data).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 200) {
          this.$message({message: "订单已取消，订金将在3个工作日内返还", type: "success"})
          this.loadOrder()
        } else {
          this.$message({message: "订单未能变更，请检查网络并重新取消订单，或联系客服咨询解决方案", type: "error"})
          // this.$message({message: jsonResult.message, type: "error"})
        }
      })
    },
  },
  mounted() {
    this.loadOrder()
  }
}
</script>

<style>

</style>